<template>
  <div class="container">
    <div class="is-size-4 mt-4 mb-6 has-text-weight-bold">
      <span class="primary-color">[ </span>错题集<span class="primary-color">
        ]</span>
    </div>

    <!-- 筛选 -->
    <span class="mx-3">科目</span>
    <el-select
      v-model="selectedSubjectId"
      placeholder="请选择"
      @change="handleSubjectChange"
    >
      <el-option
        v-for="item in subjectList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>

    <!-- 筛选 -->
    <el-radio-group v-model="qType" class="mx-3">
      <el-radio label="single">单选题</el-radio>
      <el-radio label="multiple">多选题</el-radio>
    </el-radio-group>

    <!-- 错题列表 -->
    <div v-for="(item, index) in qList" :key="index" class="my-5 mx-3">
      <question-item
        :qid="item.id"
        :index="index + 1"
        :subject="item.subject"
        mode="review"
        :type="qType"
        :correct="item.correct"
        :difficult="item.difficult"
        :question="item.info.desc"
        :choices="item.info.choice"
      />
    </div>
    <el-empty v-if="qList.length === 0" description="该科目暂无错题" />
  </div>
</template>

<script>
// const qList = require('@/temp/questionList')
const reviewApi = require('@/api/review')
import QuestionItem from '@/components/QuestionItem.vue'

export default {
  components: {
    QuestionItem
  },
  data() {
    return {
      qType: 'single',
      subjectList: [],
      selectedSubjectId: '',
      singleList: [],
      multipleList: []
    }
  },
  computed: {
    qList() {
      if (this.qType === 'single') return this.singleList
      else return this.multipleList
    }
  },
  mounted() {
    this.fetchSubjects()
  },
  methods: {
    fetchSubjects() {
      reviewApi.getSubjectList().then(res => {
        this.subjectList = res.data
        console.log(res.data)
        this.selectedSubjectId = this.subjectList[0].id
        this.handleSubjectChange()
      })
    },
    handleSubjectChange() {
      this.$loading()
      console.log(this.selectedSubjectId)
      reviewApi
        .getReviewQuestions(this.selectedSubjectId)
        .then(res => {
          console.log(res)
          this.singleList = res.data.single
          this.multipleList = res.data.multiple
          this.$loading().close()
        })
        .catch(() => {
          this.$loading().close()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin-bottom: 100px;
}
</style>
